<template>
	<div>
		<!-- 登陆 -->
		<form class="form" @submit.prevent="onSubmit">
			<label
				>用户：
				<input type="text" v-model="username" />
			</label>
			<label>
				密码：
				<input type="password" v-model="password" />
			</label>
			<label>
				<button>提交</button>
			</label>
		</form>
	</div>
</template>

<style lang="scss">
.form {
	& > label {
		display: block;
	}
}
</style>

<script>
// npm i  axios  或者 yarn  add axios
import axios from 'axios'
export default {
	data() {
		return {
			username: '',
			password: '',
		}
	},
	methods: {
		onSubmit() {
			// 解构
			const { username, password } = this.$data
			// 前端做基础的校验
			if (username.trim().length < 2) {
				return alert('用户名不许少于2位！')
			}

			if (password.trim().length < 6) {
				return alert('密码不少于6位！')
			}

			// 发送给后端接口
			// console.log(username, password)
			axios.get('/data.json').then((res) => {
				// 模拟后端的逻辑判断。对比用户和密码
				if (res.data.username === username && res.data.password === password) {
					alert('登陆成功！')
				} else {
					alert('登陆失败！')
				}
			})
		},
	},
}
</script>